<template>
  <div class="list main-body">
    <div class="list-title">
      <el-row>
        <el-col :span="10">
          <img src="../../../../assets/img/template-item2/icons/zhuangshileft.png" alt="">
        </el-col>
        <el-col :span="4">
          <h2>榜单推荐</h2>
        </el-col>
        <el-col :span="10">
          <img src="../../../../assets/img/template-item2/icons/zuangshiright.png" alt="">
        </el-col>
      </el-row>
    </div>
    <div class="list-body clearfix">
      <!-- 最平价 -->
      <div class="price left">
        <div class="price-title">
          <h4>最平价<em class="ttl">电车品牌</em></h4>
        </div>
        <div class="price-body">
          <!-- <div class="price-one clearfix" @click="showLogo">
            <span class="price-top left">0</span>
            <p class="price-body-title left">立马</p>
            <p class="price-cnt left">中草药古方个人...</p>
            <div v-show="logo" class="logo">
              <img src="../../../../assets/img/template-item2/brands/2.png" alt="logo">
            </div>
          </div> -->
          <div v-for="i in 10" :key="i" class="price-one clearfix fath-box">
            <span class="price-top left">{{ i++ }}</span>
            <p class="price-body-title left">立马</p>
            <p class="price-cnt left">中草药古方个人...</p>
            <div v-show="logo" class="logo logo-box">
              <img src="../../../../assets/img/template-item2/brands/2.png" alt="logo">
            </div>
          </div>
          <button>查看更多</button>
        </div>
      </div>
      <!-- 最受欢迎 -->
      <div class="price greet left">
        <div class="price-title">
          <h4>最受欢迎<em class="ttl">电车品牌</em></h4>
        </div>
        <div class="price-body">
          <div v-for="i in 10" :key="i" class="price-one clearfix fath-box">
            <span class="price-top left">{{ i++ }}</span>
            <p class="price-body-title left">立马</p>
            <p class="price-cnt left">中草药古方个人...</p>
            <div v-show="logo" class="logo logo-box">
              <img src="../../../../assets/img/template-item2/brands/2.png" alt="logo">
            </div>
          </div>
          <button>查看更多</button>
        </div>
      </div>
      <!-- 最好骑 -->
      <div class="price ride left">
        <div class="price-title">
          <h4>最好骑<em class="ttl">电车品牌</em></h4>
        </div>
        <div class="price-body">
          <div v-for="i in 10" :key="i" class="price-one clearfix fath-box">
            <span class="price-top left">{{ i++ }}</span>
            <p class="price-body-title left">立马</p>
            <p class="price-cnt left">中草药古方个人...</p>
            <div v-show="logo" class="logo logo-box">
              <img src="../../../../assets/img/template-item2/brands/2.png" alt="logo">
            </div>
          </div>
          <button>查看更多</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      logo: true
    }
  },
  methods: {
    showLogo() {
      if (!this.logo) {
        this.logo = true
      } else {
        this.logo = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../../assets/template-item2/css/base.scss';
.list{
  margin: 40px auto;
  .list-title{
    @include home-title;
  }
  @include btn;
  .list-body{
    margin-top: 40px;
    .price{
      height: 650px;
      width: 390px;
      border-right: 1px solid #ccc;
      padding: 20px 0px;
      .price-title{
        width: 222px;
        height: 36px;
        background: url('../../../../assets/img/template-item2/icons/bangshanglilaing_img_biaoqianh.png') no-repeat;
        text-align: center;
        margin: 0px auto;
      }
      h4{
        font-size:18px;
        font-weight:600;
        line-height:34px;
        color:#FFF;
        .ttl{
          font-size: 16px;
        }
      }
      .price-body{
        margin-top: 34px;
        .price-one{
          margin-bottom: 25px;
          .logo{
            display: none;
            width: 120px;
            height: 68px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            img{
              display: block;
              max-width: 102px;
              max-height: 58px;
            }
          }
          .price-top{
            width: 20px;
            height: 20px;
            display: block;
            border-radius: 5px;
            background-color: #DC3535;
            color: #FFF;
            text-align: center;
            line-height: 20px;
          }
          .price-body-title{
            width:60px;
            height:24px;
            font-size:18px;
            font-weight:600;
            color: #000;
            margin-left: 10px;
          }
          .price-cnt{
            width:129px;
            height:21px;
            font-size:16px;
            color:#ccc;
            margin-left: 90px;
          }
        }
        >.fath-box{
          cursor: pointer;
          >.logo-box{
            width: 120px;
            height: 68px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            display: none;
            >img{
              display: block;
              max-width: 102px;
              max-height: 58px;
            }
          }
          &:hover{
            >.logo-box{
              display: block;
            }
          }
        }
      }
      button{
        margin-left: 141px;
      }
    }
    .greet{
      margin-left: 15px;
      .price-title{
        background: url('../../../../assets/img/template-item2/icons/bangshanglilaing_img_biaoqianl.png') no-repeat;
      }
    }
    .ride{
      margin-left: 15px;
      border:none;
      .price-title{
        background: url('../../../../assets/img/template-item2/icons/bangshanglilaing_img_biaoqianh11.png') no-repeat;
      }
    }
  }
}
</style>
